import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TextInput,
  PixelRatio,
  Image
} from 'react-native';
var userImageAdress = '../../public/img/user-icon.png';

export default class Search extends Component {
    constructor (props) {
        super(props);
        this.state = {
            searchValue: ''
        }
        this._handleSearch = this._handleSearch.bind(this)
    }

    _handleSearch (value) {
        this.setState({
            searchValue: value
        })
    }

  render() {
      const {searchValue} = this.state
    return (
      <View style={[styles.searchWrap]}>
        <View style={[styles.flex9]}>
            <TextInput
                style={styles.input}
                value={searchValue}
                editable = {true}
                // maxLength = {40}
                onChangeText={this._handleSearch}
                autoCapitalize='none'
                autoCorrec={false}
            />
        </View>
        <View style={styles.flex1}>
            <Image
                style={[styles.userImg, styles.lex1]}
                source={require(userImageAdress)}
            />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
    searchWrap: {
    justifyContent: 'center',
    alignItems: 'center',
    height: 40,
    flexDirection: 'row',
    paddingLeft: 5,
    paddingRight: 5,
  },
  flex1: {
      flex: 1,
  },
  flex9: {
    flex: 8,
  },
  input: {
    borderWidth: 1/PixelRatio.get(),
    height: 25,
    borderRadius: 4,
    paddingLeft: 5,
    paddingRight: 5,
    borderColor: '#000',
  },
  userImg: {
      width: 25,
      height: 25,
      marginLeft: 5,
      alignSelf: 'center'
  }

});
